<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row>
        <el-col :span="8">
          <el-input
            placeholder="根据订单号搜索"
            @change="check($event)"
            v-model="queryInfo.orderNo"
            @clear="getOrderList"
            clearable
          >
            <el-button slot="append" icon="el-icon-search" @click="searchByOrderno"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 订单列表数据 -->
      <el-table :data="orderData.list" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column min-width="150px" label="订单编号" prop="orderNo"></el-table-column>
        <el-table-column min-width="100px" label="订单价格" prop="payment"></el-table-column>
        <el-table-column min-width="80px" label="是否付款" prop="statusDesc">
          <template slot-scope="scope">
            <el-tag
              type="danger"
              v-if="scope.row.status > 20 || scope.row.status === 0"
            >{{scope.row.statusDesc}}</el-tag>
            <el-tag
              :type="scope.row.status === 10 ? 'warning' : 'success'"
              v-else
            >{{scope.row.statusDesc}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column min-width="100px" label="是否发货">
          <template slot-scope="scope">
            <el-popover placement="top" trigger="hover" v-if="scope.row.status === 20">
              <el-button size="mini" type="success" @click="sendGoods(scope.row)">立即发货</el-button>
              <el-tag type="primary" slot="reference">{{scope.row.statusDesc}}</el-tag>
            </el-popover>
            <el-tag type="danger" v-else-if="scope.row.status >= 20">{{scope.row.statusDesc}}</el-tag>
            <el-tag type="info" v-else>{{scope.row.statusDesc}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column min-width="100px" label="收货人" prop="receiverName"></el-table-column>
        <el-table-column min-width="100px" label="付款方式" prop="paymentTypeDesc"></el-table-column>
        <el-table-column min-width="160px" label="付款时间" prop="paymentTime"></el-table-column>
        <el-table-column min-width="160px" label="发货时间" prop="sendTime"></el-table-column>
        <el-table-column min-width="160px" label="下单时间" prop="createTime"></el-table-column>
        <el-table-column min-width="160px" label="交易完成时间" prop="endTime"></el-table-column>
        <el-table-column min-width="160px" label="交易关闭时间" prop="closeTime"></el-table-column>
        <el-table-column fixed="right" min-width="180px" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="editOrder(scope.row)"
            >编辑</el-button>
            <el-button
              type="success"
              size="mini"
              icon="el-icon-location"
              @click="getOrderAddress(scope.row)"
            >地址</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="orderData.total"
      ></el-pagination>
    </el-card>

    <el-dialog
      title="地址"
      :visible.sync="addressDialogVisible"
      width="800px"
      :close="addressDialogClosed"
      center
    >
      <el-form :model="addressForm" label-width="100px" ref="addressFormRef">
        <el-form-item label="收件人">
          <el-input v-model="addressForm.receiverName"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="addressForm.receiverPhone"></el-input>
        </el-form-item>
        <el-form-item label="固定号码">
          <el-input v-model="addressForm.receiverMobile"></el-input>
        </el-form-item>
        <el-form-item label="省/市/区">
          <v-distpicker
            @selected="distpickerSelected"
            :province="defaultProvince"
            :city="defaultCity"
            :area="defaultArea"
          ></v-distpicker>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="addressForm.receiverAddress"></el-input>
        </el-form-item>
        <el-form-item label="邮政编码">
          <el-input v-model="addressForm.receiverZip"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        orderNo: null,
        pageNum: 1,
        pageSize: 10
      },
      orderData: {},
      addressForm: {},
      defaultProvince: '',
      defaultCity: '',
      defaultArea: '',
      //
      addressDialogVisible: false
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    async getOrderList() {
      const { data: res } = await this.$axios.get('manage/order/get_order_list', {
        params: this.queryInfo
      })
      if (res.status !== 0) return this.$message.error(res.msg)
      this.orderData = res.data
    },
    //
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getOrderList()
    },
    //
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getOrderList()
    },
    //
    async searchByOrderno() {
      if (this.queryInfo.orderNo === null || this.queryInfo.orderNo === '') {
        return this.$message.warning('订单号是全数字')
      }
      const { data: res } = await this.$axios.get('manage/order/get_order_byorderno/' + this.queryInfo.orderNo)
      if (res.status !== 0) return this.$message.error(res.msg)
      this.orderData = res.data
    },
    //
    check(value) {
      const c = /^[0-9]*$/
      if (!c.test(value)) {
        this.queryInfo.orderNo = null
      }
    },
    //
    getOrderAddress(row) {
      if (row.shippingVo === null) {
        return this.$confirm('数据不存在', '数据丢失', {
          confirmButtonText: 'OK',
          cancelButtonText: '走了',
          type: 'info'
        })
          .then(() => {})
          .catch(() => {})
      }
      this.addressForm = row.shippingVo
      if (row.shippingVo.receiverProvince === null || row.shippingVo.receiverProvince.trim() === '') {
        this.defaultProvince = '福建省'
      } else {
        this.defaultProvince = row.shippingVo.receiverProvince
      }
      if (row.shippingVo.receiverCity === null || row.shippingVo.receiverCity.trim() === '') {
        this.defaultCity = '泉州市'
      } else {
        this.defaultCity = row.shippingVo.receiverCity
      }
      if (row.shippingVo.receiverDistrict === null || row.shippingVo.receiverDistrict.trim() === '') {
        this.defaultArea = '德化县'
      } else {
        this.defaultArea = row.shippingVo.receiverDistrict
      }
      this.addressDialogVisible = true
    },
    editOrder(row) {
      this.$confirm('没想好，还没做！biajibiaji...', 'LynKuma', {
        confirmButtonText: '还行',
        cancelButtonText: '不行也得行',
        type: 'success'
      })
    },
    //
    addressDialogClosed() {
      this.$refs.addressFormRef.resetFields()
    },
    //
    distpickerSelected(data) {
      console.log('省市区勾选：')
      console.log(data.province.value)
      console.log(data.city.value)
      console.log(data.area.value)
    },
    // 立即发货
    async sendGoods(row) {
      console.log('立即发货：')
      const { data: res } = await this.$axios.put('manage/order/send_goods/' + row.orderNo)
      console.log(res)
      if (res.status !== 0) return this.$message.error(res.msg)
      row.sendTime = res.data.sendTime
      row.status = res.data.status
      row.statusDesc = res.data.statusDesc
      this.$message.success(res.msg)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
